<template>
	<view class="movie-detail">
		<view class="bg-wrap">
			<img :src="movie.filmCover" class="bg-image" alt="">
			<view class="movie-info  ">
				<view class="movie-image-box">
					<img class="movie-image" :src="movie.filmCover">
				</view>
				<view class="flex flex-direction">
					<view class="movie-title margin-top-xl">{{ movie.filmName }}</view>
					<view class="text-sm">{{ movie.filmOtherName }}</view>
					<view class="text-xs">类别:{{ movie.filmSort }}</view>
					<view class="text-xs margin-top-xs">时长:{{ movie.filmTotalTime }}分钟</view>
					<p class="text-xs intro margin-top-sm">
						简介：{{movie.filmDesc}}
					</p>
				</view>
			</view>
			<view class="showtimes">
				<view class="showtime" v-for="showtime in showtimes" :key="showtime.cinemaId">
					<view class="hall">{{ showtime.cinemaName }}</view>
					<view class="text-xs cu-time">{{ showtime.startTime }}</view>
					<button class="buy-ticket  bg-red  margin-0 text-xs" @click="buyTicket(showtime.sessionId)">去购票</button>
				</view>
			</view>
			<view class="post_class">
				<Post :move-id="movie.filmId"></Post>
			</view>
		</view>

	</view>
</template>
<script>
	import Post from '@/pages/postIt/Post.vue'
	export default {
		data() {
			return {
				movie: {},
				showtimes: [{
						id: 1,
						hall: '影厅名',
						startTime: '开始时间'
					},
					{
						id: 2,
						hall: '影厅名',
						startTime: '开始时间'
					},
					{
						id: 3,
						hall: '影厅名',
						startTime: '开始时间'
					}
				]
			}
		},
		components: {
			Post
		},
		 onLoad() {
			 this.getDetail(),
				this.getCinemaList()
		},
		methods: {
			buyTicket(showtimeId) {
				uni.navigateTo({
					url: '/pages/cinema/cinema?sessionId=' + showtimeId,
					
				})
			},
			getDetail() {
				this.movie =uni.getStorageSync('data')
			},
		 	getCinemaList() {
			 this.$ajax.get('film/session/list', {
					t: 1684075619622,
					page: '1',
					limit: '10',
					key: this.movie.filmId
				}).then(res => {
					console.log(res);
					this.showtimes = res.page.list
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.movie-detail {}

	.bg-wrap {
		position: relative;
		width: 100%;
		height: 400upx;

		.bg-image {
			width: 100%;
			height: 400upx;
			opacity: 0.5;
		}

		.movie-info {
			position: absolute;
			top: 0;
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			width: 100%;
			margin-bottom: 20px;
			backdrop-filter: blur(10px);
		}
	}

	.movie-image-box {
		width: 200upx;
		height: 400upx;
		padding: 40upx 10upx;
		margin-right: 20upx;

		.movie-image {
			width: 100%;
			height: 100%;
			overflow-x: hidden;
		}
	}

	.movie-title {
		font-size: 30upx;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.intro {
		width: 400upx;
	}

	.showtimes {
		margin: 10upx;
		border-top: 2upx solid #d9cccc;

		.showtime {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 70upx;
			margin-bottom: 10px;
			padding: 10upx 20upx;
			border-bottom: 2upx solid #d9cccc;

			.cu-time {
				line-height: 70upx;
				margin-left: 10upx;
			}
		}
	}

	.buy-ticket {
		margin-left: auto;
	}
</style>